<template>
  <div class="add-attr">
    <el-dialog :title="title" v-model="dialogVisible" width="40%">
      <el-form :model="form" label-width="100px" label-position="left">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="语言">
              <el-select v-model="form.language" placeholder="请选择">
                <el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="属性项">
              <el-input v-model="form.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="属性项(外文)">
              <el-input v-model="form.nameForeign" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="属性"> -->
        <div class="flex">
          <p class="w-[100px] text-#606266">属性值</p>
          <div>
            <div
              class="p-2 border border-solid rounded border-#E0E0E0 mb-2"
              v-for="(itm, idx) in form.valueList"
              :key="idx"
            >
              <div class="pt-4 pb-4 pl-2 bg-[#F7F9FA] rounded-[6px] flex justify-between">
                <div class="w-[100%]">
                  <div class="w-[100%] flex items-center">
                    <!-- <el-row :gutter="24"> -->
                    <el-col :span="8">
                      <el-form-item label="规格名" required label-position="top">
                        <el-input v-model="itm.name" placeholder="规格名" />
                      </el-form-item>
                    </el-col>
                    <img
                      class="w-[52px] h-[8px] mx-2 mt-2"
                      src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01P7ANKN1S9wOi58Coc_!!1034622205.png"
                      alt=""
                    />
                    <el-col :span="8">
                      <el-form-item label="规格名（外文）" required label-position="top">
                        <el-input v-model="itm.nameForeign" placeholder="规格名（外文）" />
                      </el-form-item>
                    </el-col>
                    <!-- </el-row> -->
                    <div class="flex items-center pl-6 mt-2 text-#8F8F8F cursor-pointer">
                      <!-- class="absolute -translate-y-1/2 cursor-pointer top-1/2 right-2" -->
                      <Icon @click="removeSpecType(idx)" icon="material-symbols:delete-outline" />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 最后一个才展示 -->
            </div>
            <div class="mt-4">
              <el-button
                type="primary"
                link
                plain
                color="#3721FF"
                size="small"
                @click="addSpecValue"
                >+ 新增规格值</el-button
              >
            </div>
          </div>
        </div>
        <!-- </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button color="#3721FF" type="primary" :loading="loading" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// const emit = defineEmits(['update:dialogVisible'])
import { AttrApi } from '@/api/product/attr'
import { deepCopy,throttle } from '@/utils'

const emit = defineEmits(['update:dialogVisible'])
const dialogVisible = ref(false)
const languageList = ref([])
const title = ref('新增属性')
const loading = ref(false)
const form = ref({
  name: '',
  nameForeign: '',
  language: '', //语言
  valueList: [
    {
      name: '',
      nameForeign: ''
    }
  ]
})
// 获取语言列表
const handlegetLanguageList = () => {
  AttrApi.getLanguageList().then((res) => {
    languageList.value = res
  })
}
// 新增
const submit = throttle(async  () => {
  console.log(form.value)
  loading.value = true
  if (selectedId.value) {
    AttrApi.updateProperty(form.value).then((res) => {
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
      loading.value = false
      closeDialog()
      emit('update:dialogVisible', false)
    })
    loading.value = false
  } else {
    AttrApi.createProperty(form.value).then((res) => {
      ElMessage({
        message: '新增成功',
        type: 'success'
      })
      loading.value = false
      closeDialog()
      emit('update:dialogVisible', false)
    })
    loading.value = false
  }
},1000)
// shanchus
const removeSpecType = (idx: number) => {
  if (form.value.valueList.length === 1) {
    ElMessage({
      message: '至少保留一个属性值',
      type: 'warning'
    })
    return
  }
  form.value.valueList.splice(idx, 1)
}
const addSpecValue = () => {
  form.value.valueList.push({
    name: '',
    nameForeign: ''
  })
}
const selectedId = ref()
const openDialog = (id: number) => {
  dialogVisible.value = true
  selectedId.value = id
  title.value = id ? '编辑属性' : '新增属性'
  if (id) {
    console.log(id, 'idssssssssssssssss')
    // 等接口
    AttrApi.getPropertyDetail(id).then((res) => {
      form.value = res
      form.value.valueList = res.valueDOList
    })
  } else {
    // 初始化form
    form.value = {
      name: '',
      nameForeign: '',
      language: '', //语言
      valueList: [
        {
          name: '',
          nameForeign: ''
        }
      ]
    }
  }
}
// 查询接口
const closeDialog = () => {
  dialogVisible.value = false
  loading.value = false
}
onMounted(() => {
  handlegetLanguageList()
})
defineExpose({
  openDialog,
  closeDialog
})
</script>

<style scoped></style>
